<template>
	<van-list
			v-model:loading="load" :finished="finish"
			error-text="没有更多了" @load="onLoad"
	>
		<div class="worth_buy flex_column">
			<!-- 导航栏-->
			<NavBar title="值得买"></NavBar>

			<!-- 菜单导航 -->
			<div class="nav_list ">
				<img class="back_img" src="https://yanxuan.nosdn.127.net/a93a392fb8006ba26dea38477979b7b4.jpg?imageView"
					 alt="back">
				<div class="slogan flex">
					<img class="slogan_img" alt="值得买"
						 src="http://yanxuan.nosdn.127.net/0b7676e645253f84be662aacfc051922.png">
					<div class="slogan_title">严选好物 用心生活</div>
				</div>
				<div class="carousel_slot">
					<van-config-provider :theme-vars="themeVars">
						<van-swipe :loop="false" :width="90">
							<!-- Tip: 每两个元素为一组，一组代表一个 swipe-item 元素-->
							<van-swipe-item v-for="list in navListGroup" :key="list">
								<Group :list="list"></Group>
							</van-swipe-item>
						</van-swipe>
					</van-config-provider>
				</div>
			</div>


			<!--		<van-list-->
			<!--				v-model:loading="load" :finished="finish"-->
			<!--				error-text="没有更多了" @load="onLoad"-->
			<!--		>-->
			<!-- 帖子 - 信息卡片 -->
			<div class="post_card_info">

				<!-- region >>> Tip: 使用 flex_column 实现 纵向瀑布流布局 -->
				<!--			<div class="card_left flex_column">-->
				<!--				<PostCard v-for="item in CardInfoList[0]?.topics " :item="item"></PostCard>-->
				<!--			</div>-->
				<!--			<div class="card_right flex_column">-->
				<!--				<PostCard v-for="item in CardInfoList[1]?.topics" :item="item"></PostCard>-->
				<!--			</div>-->
				<!-- endregion -->

				<!-- 瀑布流 -->
				<Waterfall
						style="background: #eee; min-height: 350px" :list="list"
						:has-around-gutter="false"
						:breakpoints="breakpoints"
				>
					<!--	Tip: 作用域插槽返回字段： item 原始数据, url 图片资源, index 卡片索引 -->
					<template #item="{ item, url, index }">
						<div class="card">
							<!--							<LazyImg :url="url"/>-->
							<PostCard :item="item"></PostCard>
						</div>
					</template>
				</Waterfall>
			</div>
			<!--		</van-list>-->

		</div>
	</van-list>

</template>

<script lang="ts">
export default {
    name: "WorthBuy"
}
</script>

<script setup lang="ts">
// region >>> 相关依赖

import {reactive, onMounted, ref, watch} from "vue";
import NavBar from "@/components/NavBar/index.vue";
import Group from "@/pages/Worth Buy/Components/NavItem/Group.vue";
import PostCard from "@/pages/Worth Buy/Components/PostCard/index.vue";
import loading from '@/assets/loading.png'
import error from '@/assets/error.png';
import {debounce, throttle} from "lodash";

console.log(debounce)
/*api*/
import WorthBuyApi, {ObjectModel} from "@/api/WorthBuyApi";
import type {NavModel} from "@/api/WorthBuyApi";

/* vant 轻提示：
showSuccessToast('成功');
showFailToast('失败');
*/
import {showSuccessToast, showFailToast} from 'vant';


/*waterfall 瀑布流插件*/
import {LazyImg, Waterfall} from 'vue-waterfall-plugin-next'
import 'vue-waterfall-plugin-next/dist/style.css';

// endregion

// region >>> 相关数据

/*group*/
const navListGroup = ref<NavModel[][]>();

/*重置样式*/
const themeVars = reactive({});

/*瀑布流卡片数据*/
const params = {
    page: 1,
    size: 2,
}

// 卡片信息（looks, topics-主题 ）
// const CardInfoList = ref([]);
const list = ref([]); // 瀑布流列表数据

const loadProps = {
    loading,
    error
};
const breakpoints = {
    1200: {
        //当屏幕宽度小于等于1200
        rowPerView: 4,
    },
    800: {
        //当屏幕宽度小于等于800
        rowPerView: 3,
    },
    500: {
        //当屏幕宽度小于等于500
        rowPerView: 2,
    },
};

// 滚动到底部更新数据
const load = ref(false);
const finish = ref(false);


// endregion

// region >>> 生命周期函数
onMounted(() => {
    getBanners();
    getPostCard();
})

// watch监听数据更新完毕后关闭loading
watch(list, (newValue, oldValue) => {
    load.value = false;
});

// endregion

// region >>> 自定义功能函数
/*获取 banner 数据*/
const getBanners = async () => {
    try {
        // 获取全部的数据
        let result = await WorthBuyApi.Banner();
        console.log(">>> getBanners:", result.navList);

        let slice_result = sliceArr(result.navList, 2);
        console.log(">>> slice_result:", slice_result);

        navListGroup.value = slice_result;

    } catch (e) {
        showFailToast("获取轮播图数据失败，请刷新重试");
        console.log(">>> getBanners_Error:", e);
    }
};

/*获取瀑布流卡片信息*/
let flag = true;
const getPostCard = async () => {
    try {
        // 获取全部的数据
        let result = await WorthBuyApi.PostDec(params);
        console.log(">>> getPostCard:", result.result);

        // let loosArr = result.result.map(item => item.look);
        let topicsArr = result.result.map(item => item.topics) as any;
        list.value = list.value.concat(...topicsArr);
        flag = false;
    } catch (e) {
        showFailToast("获取瀑布流数据失败，请刷新重试");
        console.log(">>> getPostCard_Error:", e);
    }
    flag = true;
};

/*数组排序*/
function sortArr(arr: any) {
    // let result = [];
    for (let i = 0; i < arr.length / 2 - 1; i++) {

    }
    // return result;
}

/*数组数据切割*/
function sliceArr(arr: any, len: number) {
    if (!(arr instanceof Array)) {
        return;
    }

    let result = [];
    // Tip: 循环，每 len 个元素为一组切割。
    for (let i = 0; i < arr.length; i += len) {
        // slice() 方法以新的数组对象，返回数组中被选中的元素。

// slice() 方法选择从给定的 start 参数开始的元素，并在给定的 end 参数处结束，但不包括。
        result.push(arr.slice(i, i + len));
    }

    return result;
}

// endregion


// region >>> 事件回调


const onLoad = debounce(() => {
    console.log("????", list.value.length)
    if (list.value.length !== 0 && flag) {
        params.page++;
        getPostCard();
        // load.value = false
    }
}, 100)
// endregion

</script>

<style lang="less" scoped>
/*统一样式*/
.flex {
  display: flex;
}

.flex_column {
  display: flex;
  flex-direction: column;
}

.van-swipe-item {
  height: 270px;
}

.van-swipe {
  position: relative;
}

// van-swipe__indicators 选择器样式
.custom-indicators {
  width: 100%;
  height: 20px;
  // 相对父级框体居中
  position: absolute;
  //top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;

}

root::v-deep(.swipe__indicator) {
  width: 18px;
}


.card {
  width: 172.5px;
  background: beige;
}


/*页面布局*/
.worth_buy {
  width: 100%;
  //min-height: 667px;
  position: relative;
  box-sizing: border-box;
  background: #eee;

  .nav_list {
    //height: 259px;
    position: relative;
    // 线性渐变 - 默认从上至下
    //background-image: linear-gradient(to bottom left, rgb(205, 169, 109),
    //white);
    padding: 22.5px 10px 0;
    z-index: 2;

    .back_img {
      width: 375px;
      //height: 259px;
      position: absolute;
      top: 0;
      left: 0;
      z-index: -2;
    }

    .slogan {
      align-items: center;

      &_img {
        width: 65px;
        height: 34.5px;
      }

      &_title {
        width: max-content;
        font-size: 15px;
        color: #fff;
      }
    }

    .carousel_slot {
      width: 355px;
      //height: 270px;
      background: #f9f9f9;
      border-radius: 10px;

      .carousel_item {
      }
    }
  }

  .post_card_info {
    width: 355px;
    margin: 15px 10px 0;
    //flex-wrap: wrap;
    justify-content: space-between;
    align-content: space-between;

    .card_left {
    }

    .card_right {
    }

  }

}
</style>